import React from 'react'
import {connect,} from 'react-redux'
import {withRouter,} from 'react-router-dom'
// component
import LinkTitle from "../LinkTitle/LinkTitle"
import GameCarouselItem from "./GameCarouselItem/GameCarouselItem"
// antd-mobile
import {Carousel, WingBlank,} from 'antd-mobile'
// stylesheet
import './GameCarousel.css'
import {GameDataArrayToObject, GameDataObjectFinalized} from "../../../../../../redux/game";
import GameListHandler from "../../../../../../model/GameList";
import {formatDate} from "../../../../../../utils/dateService";
import TimeBg from "../../../../../../res/images/web/home/time of game@2x.png"
// mock data


class GameCarousel extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            sliderHeight: '140px',
            gameListHandler: null,
        }

    }

    componentDidMount() {

        const {
            matches,
            teams,
            events,
            stages,
        } = this.props.gameList

        const handler = new GameListHandler({matches, teams, events, stages,})
        window.dispatchEvent(new Event('resize'))
        this.setState({
            sliderHeight: 'auto',
            gameListHandler: handler,
        })
    }

    componentDidUpdate(prevProps, prevState, snapshot) {

        const {
            matches,
            teams,
            events,
            stages,
        } = this.props.gameList

        const handler = new GameListHandler({matches, teams, events, stages,})
        const prevMatches = prevProps.gameList.matches

        if (matches.length > 1 && matches.length !== prevMatches.length) {
            window.dispatchEvent(new Event('resize'))
            this.setState({
                sliderHeight: 'auto',
                gameListHandler: handler,
            })
        }
    }

    render() {

        const today = formatDate(new Date(), '/') + ' 今天'
        const title = <div
            style={{position: 'relative'}}
        >
            <img alt='' src={TimeBg} style={{
                width: '133px',
                height: '31px',
            }}/>
            <span
                style={{
                    position: 'absolute',
                    top: '50%',
                    left: '12px',
                    transform: 'translateY(-50%)',
                    color: '#fff',
                }}
            >
                {today}
            </span>
        </div>

        const handler = this.state.gameListHandler
        if (handler === null) return null

        const schedule = handler.listSchedule()
        const live = handler.listLive()
        const end = handler.listEnd()
        const cancel = handler.listCancel()
        let data = [...live, ...schedule]
        if (data.length === 0) {
            data = [...end, ...cancel]
        }
        const gameCarouselData = data

        const CarouselTemplate = (gameCarouselData && gameCarouselData.slice(0, 3).map((game, index) => (
            // <GameCarouselItem game={game} key={index}/>
            <li
                key={index}
            >
                <GameCarouselItem game={game} key={index}/>
            </li>
        )))

        return (
            <>
                {title}
                {/*<WingBlank>*/}
                {/*    <LinkTitle*/}
                {/*        title='热门赛事'*/}
                {/*        path='game'*/}
                {/*    />*/}
                {/*</WingBlank>*/}

                {/*<div className='game-carousel-ctn'>*/}

                {/*    <Carousel*/}
                {/*        // className="game-carousel-ctn"*/}
                {/*        vertical*/}
                {/*        dots={false}*/}
                {/*        dragging={true}*/}
                {/*        swiping={false}*/}
                {/*        autoplay*/}
                {/*        infinite*/}
                {/*        frameOverflow={'visible'}*/}
                {/*        slideWidth='61px'*/}
                {/*    >*/}
                {/*        {CarouselTemplate}*/}
                {/*    </Carousel>*/}
                {/*</div>*/}


                <ul className='game-carousel-ctn'>
                    {CarouselTemplate}
                </ul>

                <div style={{
                    height: '44px',
                    textAlign: 'center',
                }}
                     onClick={(e) => this.props.history.push('./game')}
                >
                    <span className='gray-text' style={{lineHeight: '44px'}}>查看更多</span>
                </div>
            </>
        )
    }

}

const mapState = state => ({
    games: state.game.games,
    gameList: state.home.gameList,
})

export default connect(mapState,)(withRouter(GameCarousel))



